import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList,
    TouchableOpacity,
    Modal, DeviceEventEmitter
} from 'react-native';
import Swiper from 'react-native-swiper';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AsyncStorage from '@react-native-community/async-storage';
const { width, height } = Dimensions.get('window');
import Styles from './Styles';

import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Football from "../../utils/Football";
import Utils from "../../utils/Utils";

import RootSiblings from 'react-native-root-siblings';
import { Card } from 'react-native-shadow-cards';

//引入
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import RankLists from './RankLists';


var id = 0;
var elements = [];


export default class UserRank extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            single_type: ["7", "30"],
            curr_single_type: "7",

            loaded: false,
            refreshing: false,
            tabShow: false,
            types: [
                { id: 1, gid: 0, label: '命中最高', isshow: true, img: require('../../image/js_img_icon_followorderbuyshop_mz.png'), data: [] },
                { id: 2, gid: 0, label: '利益最高', isshow: false, img: require('../../image/js_img_icon_followorderbuyshop_mz.png'), data: [] },
                { id: 3, gid: 0, label: '带红最多', isshow: true, img: require('../../image/js_img_icon_followorderbuyshop_dh.png'), data: [] }
            ],

        };

    }
    static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        let curr_single_type = navigation.getParam('curr_single_type');
        return {
            headerTitle: () => (
                <View style={Styles.header}>
                    <View style={{ width: width / 3 }}></View>
                    <View style={Styles.header_title}>
                        <Text style={{ color: '#ffffff', fontSize: 16 }}>排行榜</Text>
                    </View>
                    <TouchableOpacity onPress={navigation.getParam('show_single_type')}>
                        <View style={Styles.header_right}>
                            <Text style={{ color: '#ffffff' }}>近{curr_single_type}天</Text>
                            <Image resizeMode="cover" style={{ width: 12, height: 14,marginRight:12 }} source={require('../../image/js_img_nav_arrows.png')} />
                        </View>
                    </TouchableOpacity>
                </View>
            ),
            headerStyle: {
                backgroundColor: 'transparent',
                paddingTop: 18
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
                //fontWeight: 'bold',
            },
        };
    };
    componentWillMount() {
        //组件将要被加载到视图之前调用
        this.setState({
            isLogin: Ugame.isLogin()
        });
    }
    componentDidMount() {
        let curr_single_type = this.state.curr_single_type;
        this.props.navigation.setParams({ curr_single_type: curr_single_type });
        this.props.navigation.setParams({ show_single_type: this.show_single_type });
        const { navigation } = this.props;
        setTimeout(() => {
            this.setState({
                tabShow: true
            });
        }, 0)
    }
    componentWillUnmount() {
        if (elements.length > 0) {
            this.destroySibling();
        }
    }
    show_single_type = () => {
        if (elements.length == 0) {
            let sibling = new RootSiblings(this._show_single_type_model());
            id++;
            elements.push(sibling);
        } else {
            this.destroySibling();
        }
    };
    _show_single_type_model = () => {
        let { single_type, curr_single_type } = this.state;
        return (
            <TouchableOpacity style={Styles.sibling} onPress={this.destroySibling}>
                <View style={Styles.cate_menu}>
                    <View style={Styles.cate_list}>
                        {this.renderSingleType()}
                    </View>
                </View>
            </TouchableOpacity >
        );
    }
    destroySibling = () => {
        let lastSibling = elements.pop();
        lastSibling && lastSibling.destroy();
    };
    renderSingleType() {
        let { single_type, curr_single_type } = this.state;
        var itemArr = [];
        for (var i = 0; i < single_type.length; i++) {
            let data = single_type[i];
            itemArr.push(
                <TouchableOpacity key={i} onPress={() => this.change_single_type(data)}>
                    <View >
                        <Text style={Styles.cate_item}>近{data}天</Text>
                    </View>
                </TouchableOpacity>
            );
        }
        return itemArr;
    }
    change_single_type = (data) => {
        this.props.navigation.setParams({ curr_single_type: data });
        this.destroySibling();
        this.setState({
            curr_single_type: data
        },()=>{
            DeviceEventEmitter.emit('updateRankLists',{days:data});
        });        
    }
    // 滑动tab
    renderScrollableTab = () => {
        let {types,curr_single_type} = this.state;
        if (this.state.tabShow) {
            return (
                <ScrollableTabView
                    style={{ paddingTop: 8 }}
                    renderTabBar={() =>
                        <ScrollableTabBar
                            style={{ height: 35 }}
                            tabStyle={{ height: 35 }}
                        />
                    }
                    tabBarBackgroundColor='#fff'
                    tabBarActiveTextColor='#333333'
                    tabBarInactiveTextColor='#bbbbbb'
                    tabBarUnderlineStyle={Styles.tabBarUnderlines}
                >
                    {
                        types.map((item, index) => {
                            if (item.isshow) {
                                return <RankLists navigation={this.props.navigation} tabLabel={item.label} days={curr_single_type} key={++index} type={item.id} />;
                            }
                        })
                    }
                </ScrollableTabView>
            )
        }
    }
    render() {
        let { ball_addr, select_boll_addr, dataSource, bet_count } = this.state;
        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />
                <View style={{ backgroundColor: '#d0162e', width: width, height: 160, marginTop: -100, position: "absolute", top: 0 }}></View>

                {this.renderScrollableTab()}


            </View>
        )
    }
}

